<template>
  <div>
    <!-- 面包屑 -->
    <div class="home-breadcrumb">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>车间模拟</el-breadcrumb-item>
        <el-breadcrumb-item>人员排版</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div
      v-loading="loading"
      style="display: flex;justify-content: space-around;margin: 0 auto;background-color: #FFFFFF;min-height: 700px;padding: 15px;"
    >
      <div style="flex: 1;">
        <div
          style="display: flex;justify-content: space-between;align-items: center;margin:  15px 20px;"
        >
          <span>本周({{this.getCurrentWeekDate[0]}} - {{this.getCurrentWeekDate[1]}})排班表</span>
          <div>
            <el-button type="primary" plain size="small" @click="lastWeek">上一周</el-button>
            <el-button type="primary" plain size="small" @click="nextWeek">下一周</el-button>
          </div>
        </div>
        <Table :currentWeek="currentWeek"></Table>
      </div>
      <vxe-table
        border
        style="margin-top: 62px;max-height: 400px;width: 200px;margin-left: 10px;"
        :align="allAlign"
        :data="tableData"
      >
        <vxe-table-column field="name" title="name"></vxe-table-column>
        <vxe-table-column field="sex" title="sex"></vxe-table-column>
        <vxe-table-column field="age" title="age"></vxe-table-column>
      </vxe-table>
    </div>
  </div>
</template>

<script>
import USchedulApi from "@/api/uSchedulApi";
import Table from "./Table";
import DateTimeUtils from "@/common/utils/dateTimeUtils";
import moment from "moment";
export default {
  data() {
    return {
      loading:false,
      currentWeek: 0,
      value13: "",
      tableData: [{ name: "zjy" }, { name: "奥特曼" }],
      // 分页
      pageInfo: {
        pageSize: 10,
        currentPage: 1,
        count: 0,
      },
      dateList: [],
      timeShow: [],
      changeDate: ["一", "二", "三", "四", "五", "六", "日"],
      start: "",
      end: "",
      allAlign: "center",
      GriupList: [
        {
          label: "到岗",
          value: "2",
        },
        {
          label: "请假",
          value: "1",
        },
        {
          label: "休假",
          value: "0",
        },
      ],
    };
  },
  created() {
    this.loading = true
    // 本周的时间
    let date = [];
    let weekOfday = parseInt(moment().format("d")); // 计算今天是这周第几天  周日为一周中的第一天
    let start = moment()
      .subtract(weekOfday + 6, "days")
      .format("YYYY-MM-DD"); // 周一日期
    let end = moment().subtract(weekOfday, "days").format("YYYY-MM-DD"); // 周日日期
    date.push(start);
    date.push(end);

    // 获取数据
    this.userSchedulList(date[0], date[1]);
    // 获取时间list
    this.getDiffDate(date[0], date[1]);
  },
  computed: {
    getCurrentWeekDate() {
      return DateTimeUtils.getLastWeek(this.currentWeek);
    },
  },
  methods: {
    userSchedulList(startDate, endDate) {
      USchedulApi.uSchedulList(startDate, endDate).then((res) => {
        console.log(res);
      });
    },
    // 获取上周的时间
    lastWeek() {
      this.currentWeek -= 1;
    },
    // 获取下一周的时间
    nextWeek() {
      this.currentWeek += 1;
    },
    //
    getDate1(datestr) {
      var temp = datestr.split("-");
      if (temp[1] === "01") {
        temp[0] = parseInt(temp[0], 10) - 1;
        temp[1] = "12";
      } else {
        temp[1] = parseInt(temp[1], 10) - 1;
      }
      //new Date()的月份入参实际都是当前值-1
      var date = new Date(temp[0], temp[1], temp[2]);
      return date;
    },
    // 获取时间段里面的每一天
    getDiffDate(start, end) {
      var startTime = this.getDate1(start);
      var endTime = this.getDate1(end);
      var dateArr = [];
      // 清空 每次的时间 使里面只存放 7天的时间
      this.timeShow = [];

      while (endTime.getTime() - startTime.getTime() >= 0) {
        var year = startTime.getFullYear();
        var month =
          (startTime.getMonth() + 1).toString().length === 1
            ? "0" + (parseInt(startTime.getMonth().toString(), 10) + 1)
            : startTime.getMonth() + 1;
        var day =
          startTime.getDate().toString().length === 1
            ? "0" + startTime.getDate()
            : startTime.getDate();

        this.timeShow.push(year + "年" + month + "月" + day + "日");
        dateArr.push(month + "/" + day);
        startTime.setDate(startTime.getDate() + 1);
      }
      // 时间list
      this.dateList = dateArr;
      this.loading = false
    },
  },
  components: {
    Table,
  },
};
</script>

<style>
</style>
